<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/gaokai.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/product.css">
  <script src="./fonts/iconfont applestore/font_4782039_hwwb1gc3s5a/iconfont.js"></script>
  <script src="./fonts/iconfont applestore/iconfont applestore/iconfont.js"></script>
  <script src="./fonts/font_4782407_q83g31sdwhj/iconfont.js"></script>
  <link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />
  <title>product</title>
</head>

<body>
  <header>
    <div class="gao_header">
      <div class="gao_title">
        <p class="text1">产品</p>
        <img class="avatar" src="./images/admin.jpg">
      </div>
    </div>
  </header>
  <main>
    <div class="gao_main1">
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="product-box">
              <img class="product-image" src="./images/store-card-13-iphone-nav-202409.png" alt="iPhone">
              <p class="product-name">iPhone</p>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="product-box">
              <img class="gao_product-image" src="./images/store-card-13-watch-nav-202409.png" alt="Apple Watch">
              <p class="product-name">Apple Watch</p>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="product-box">
              <img class="gao_product-image" src="./images/store-card-13-ipad-nav-202405.png" alt="iPad">
              <p class="product-name">iPad</p>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="product-box">
              <img class="gao_product-image" src="./images/store-card-13-mac-nav-202410.png" alt="Mac">
              <p class="product-name">Mac</p>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="product-box">
              <img class="gao_product-image" src="./images/store-card-13-vision-pro-nav-202401.png" alt="Mac">
              <p class="product-name">Apple Vision Pro</p>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="product-box">
              <img class="gao_product-image" src="./images/store-card-13-airpods-nav-202409.png" alt="Mac">
              <p class="product-name">AirPods</p>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="product-box">
              <img class="gao_product-image" src="./images/store-card-13-homepod-nav-202301.png" alt="Mac">
              <p class="product-name">HomePod</p>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="product-box">
              <img class="gao_product-image" src="./images/store-card-13-airtags-nav-202108.png" alt="Mac">
              <p class="product-name">AirTag</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="gao_main2">
      <h1>配件</h1>
      <div class="button-group">
        <div class="swiper mySwiper2">
          <div class="swiper-wrapper ula">
            <div class="swiper-slide">
              <button class="button" data-id="0">MagSafe</button>
            </div>
            <div class="swiper-slide">
              <button class="button" data-id="1">节日之选</button>
            </div>
            <div class="swiper-slide">
              <button class="button" data-id="2">表带</button>
            </div>
            <div class="swiper-slide">
              <button class="button" data-id="3">家庭</button>
            </div>
            <div class="swiper-slide">
              <button class="button" data-id="4">充电</button>
            </div>
            <div class="swiper-slide">
              <button class="button" data-id="5">保护壳及保护装备</button>
            </div>
            <div class="swiper-slide">
              <button class="button" data-id="6">音频</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="gao_main3">
      <div class="swiper mySwiper1">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="notification">
              <svg class="icon1" aria-hidden="true">
                <use xlink:href="#icon-iconfontdaishouhuo"></use>
              </svg>
              <div class="text">
                <p>免费送货或到店取货，部分订单还可付费选择三小时快送△△，让节日好礼及时送达。</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="notification">
              <svg class="icon2" aria-hidden="true">
                <use xlink:href="#icon-liwulipin"></use>
              </svg>
              <div class="text">
                <p>制作你的个性化礼品赠言</p>
              </div>
            </div>
          </div>
        </div>       
      </div>
      <div class="gao_button">
        <div class="button1"></div>
        <div class="button2"></div>
      </div>
    </div>
    <div class="gao_title">
      <h1>好礼上新</h1>
    </div>
    <div class="gao_main4">
      <div class="gaokaidahezi1">
        <div class="product-container1">
          <h1 class="gk-product-name1">iPhone 16 Pro</h1>
        </div>
        <div class="gk-box1">
          <p class="price">RMB 7999 起，还可折抵换购*</p>
          <button class="buy-button">购买</button>
        </div>
      </div>
      <a href="./watch.html">
        <div class="gaokaidahezi2">
          <div class="product-container2">
            <h1 class="gk-product-name2">Apple Watch Series 10</h1>
          </div>
          <div class="gk-box2">
            <p class="price">RMB 2999 起</p>
            <button class="buy-button">购买</button>
          </div>
        </div>
      </a>
      <div class="gaokaidahezi3">
        <div class="product-container3">
          <h1 class="gk-product-name1">MacBook Pro</h1>
        </div>
        <div class="gk-box3">
          <p class="price">RMB 1,2999</p>
          <button class="buy-button">购买</button>
        </div>
      </div>
      <div class="gaokaidahezi4">
        <div class="product-container4">
          <h1 class="gk-product-name1">iPad mini</h1>
        </div>
        <div class="gk-box4" style="margin-bottom: 95px;">
          <p class="price">RMB 3999</p>
          <button class="buy-button">购买</button>
        </div>
      </div>
    </div>
    <div style="height: 30px;"></div>
  </main>
  <footer>
    <div class="gao_nav">
      <ul>
        <li>
          <a href="./index.html">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tuijian"></use>
            </svg>
            <p>为你推荐</p>
          </a>
        </li>
        <li>
          <a href="./product.html">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-chanpin"></use>
            </svg>
            <p>产品</p>
          </a>
        </li>
        <li>
          <a href="#">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-faxian1"></use>
            </svg>
            <p>深入探索</p>
          </a>
        </li>
        <li>
          <a href="#">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-sousuo"></use>
            </svg>
            <p>搜索</p>
          </a>
        </li>
        <li>
          <a href="./shopping.html">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gouwudai"></use>
            </svg>
            <p>购物袋</p>
          </a>
        </li>
      </ul>
    </div>
  </footer>
</body>
<script src="./swiper/swiper-bundle.min.js"></script>
<script src="./js/product.js"></script>
<script>
  var swiper = new Swiper(".mySwiper", {
    slidesPerView: 3,
    spaceBetween: 50,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });
  
</script>
<script>
  const progressCircle = document.querySelector(".autoplay-progress svg");
  const progressContent = document.querySelector(".autoplay-progress span");
  var swiper = new Swiper(".mySwiper1", {
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    }
  });
  var swiper = new Swiper(".mySwiper2", {
      effect: "coverflow",
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: "auto",
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      },
      pagination: {
        el: ".swiper-pagination",
      },
    });
</script>

</html>